<template>
  <div id="shopping">
    <div class="shopping-head">
      <img :src="'whiteBack.png' | imagePath" />
      <p>商城</p>
      <span></span>
    </div>
    <div class="shopping-user">
      <div class="shopping-user-avatar">
        <img :src="'img2.png' | imagePath" />
      </div>
      雅迪电动车
    </div>
    <ul class="shopping-list">
      <li v-for="item in list" :key="item.picture" @click="$.router.push(item.url)">
        <img :src="item.picture | imagePath" class="shopping-item-picture"/>
        <p>{{item.title}}</p>
        <img :src="'toRight.png' | imagePath" class="toMore"/>
      </li>
    </ul>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        list:[
          {picture:'storageBattery8.png',title:'商城管理',url:'shoppingCenter'},
          {picture:'storageBattery9.png',title:'商品管理',url:'goods'}
        ]
      }
    },
    beforeCreate() {
      document.querySelector('body').setAttribute('style', ' background:#FFFFFF')
    }
  }
</script>
<style>
  #shopping{
    background: url(../../assets/images/bg.png) no-repeat;
    background-size: 10rem 4.8rem;
    min-height: 4.8rem;
  }
  .shopping-head{
    height: 1.33rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.4rem;
  }
  .shopping-head img{
    width: 0.21rem;
    height: 0.37rem;
  }
  .shopping-head p{
    font-size: 0.48rem;
    color: #FFFFFF;
    font-weight: 500;
  }
  .shopping-user{
    display: flex;
    align-items: center;
    margin: 0.46rem 0.4rem;
    font-size: 0.42rem;
    color: #FFFFFF;
    font-weight: 500;
  }
  .shopping-user-avatar{
    background-color: #FFFFFF;
    width: 1.33rem;
    height: 1.33rem;
    border-radius: 100%;
    border: 2px solid #FFFFFF;
    margin-right: 0.34rem;
  }
  .shopping-user img{
    border-radius: 100%;
    width: 100%;
    height: 100%;
  }
  .shopping-list{
    padding: 0 0.4rem;
  }
  .shopping-list li{
    width: 9.2rem;
    height: 2.4rem;
    border-radius: 0.16rem;
    box-shadow: 0px 0px 20px 0px rgba(185, 185, 185, 0.3);
    display: flex;
    align-items: center;
    margin-bottom: 0.26rem;
    background-color: #FFFFFF;
  }
  .shopping-list li p{
    font-size: 0.48rem;
    font-weight: 500;
    margin-left: 1.02rem;
    flex: 1;
    font-family: PingFang SC;
  }
  .shopping-list li img{
    margin-left: 0.6rem;
  }
  .shopping-list li:nth-child(1) img{
    width: 1.25rem;
    height: 0.98rem;
  }
  .shopping-list li:nth-child(2) img{
    width: 1.04rem;
    height: 1.09rem;
  }
  .shopping-list li:nth-child(3) img{
    width: 0.98rem;
    height: 1.04rem;
  }
  .shopping-list li:nth-child(4) img{
    width: 0.98rem;
    height: 1.04rem;
  }
  .shopping-list li:nth-child(5) img{
    width: 1.02rem;
    height: 1.04rem;
  }
  .toMore{
    width: 0.2rem !important;
    height: 0.34rem !important;
    margin-right: 0.29rem;
  }

</style>
